/*
 * @Descripttion: 二次贝塞尔曲线(抛物线) 小球帧动画效果 
 * @version: 
 * @Author: ldh
 * @Date: 2020-06-08 21:25:57
 * @LastEditors: ldh
 * @LastEditTime: 2020-06-09 22:50:59
 */ 
// components/ball/ball.js

Component({
  /**
   * 组件的属性列表
   * @param {Number} width 小球宽度
   * @param {Number} height 小球高度
   * @param {String} color 小球颜色
   * @param {Number} delay 定时器延时
   * @param {Number} frames 帧数
   */
  properties: {
    width:{
      type:Number,
      value:50
    },
    height:{
      type:Number,
      value:50
    },
    color:{
      type:String,
      value:'red'
    },
    delay:{//帧 延时
      type:Number,
      value:20
    },
    frames:{
      type:Number, // 帧数
      value:null
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    ball:{
      x:10000,
      y:-100
    }
  },
  lifetimes:{
    attached(){
      wx.getSystemInfo({
        success: (result) => {
          //获取可用窗口高度
          this.windowHeight = result.windowHeight
        },
      });
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 小球帧动画
     * @param {Object} sPoint 起始坐标
     * @param {Object} ePoint 结束坐标
     * @const: {Number} sx sy, ex ey 初始 与 结束坐标
     * @var: {Number} cpy 控制点 高度
     */
    animate(sPoint,ePoint){
      const sx = sPoint.x , sy = sPoint.y , ex = ePoint.x ,ey = ePoint.y;
      // 初始化小球位置
      this.setData({
        ball:{x:sx,y:sy}
      })
     
      // 动态设置控制点高度 模拟抛物线运动
      let cpy = sy - (this.windowHeight-sy)/3
      let cp = [sx-100,cpy]
      let i = 0
      clearInterval(this.interval2)
      this.interval2 = setInterval(() => {
        if(i>=100){
          i=100
        }
        //获取百分比位置坐标 行成小球动画帧
        let [x,y] = this.twoBezier(i/100,[sx,sy],cp,[ex,ey])
        this.setData({
          ball:{x,y}
        })
        if(i>=100){
          // 动画结束 小球复位到屏幕外
          clearInterval(this.interval2)
          this.setData({
            ball:{x:10000,y:-100}
          })
        }
        // 动态计算百分比间隔 高的位置间隔短帧数多 低位置间隔长帧数少 平衡动画时间 
        // 百分比间隔 调节帧动画细腻程度
        if(this.properties.frames){
          i+= 100/this.properties.frames
        }else{
          i+=4+(sy)/200
        }
      }, this.properties.delay);
    },
    /**
       * @desc 二阶贝塞尔
       * @param {number} t 当前百分比
       * @param {Array} p1 起点坐标
       * @param {Array} p2 终点坐标
       * @param {Array} cp 控制点
       * @return {Array} 根据百分比位置 计算的坐标
       */
      twoBezier(t, p1, cp, p2) {
        const [x1, y1] = p1;
        const [cx, cy] = cp;
        const [x2, y2] = p2;
        let x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2;
        let y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
        return [parseInt(x), parseInt(y)];
    }
  }
})
